<template>
  <div class="webchatInfo">
    <el-collapse v-model="activeNames">
      <el-collapse-item title="访问信息" name="information">
        <p v-for="(item, index) in informationArr" :key="index" class="infoItem">
          <span class="title">{{item.name}}</span>
          <a v-if="['referrer', 'fromUrl', 'landingPageUrl'].includes(item.value)" target="_blank"
             :href="webchatInfo[item.value] ? webchatInfo[item.value] : ''">
            {{webchatInfo[item.value] ? webchatInfo[item.value] : ''}}
          </a>
          <span v-else class="content">{{webchatInfo[item.value] ? webchatInfo[item.value] : ''}}</span>
        </p>
      </el-collapse-item>
      <el-collapse-item title="会话信息" name="sessionInfo" v-if="(['webchat_todo', 'webchat_session', 'webchat_close', 'webchat_queue'].includes(type) && !webchatInfo.visualPeers) || module === 'dynamic'">
        <p v-for="(item, index) in sessionInfoArr" :key="index" class="infoItem">
          <span class="title">{{item.name}}</span>
          <span class="content">{{webchatInfo[item.value] ? webchatInfo[item.value] : ''}}</span>
          <span class="V7_iconfont V7_iconV7tubiao_fuzhi" v-if="['sessionId'].includes(item.value)" @click="copyText(webchatInfo[item.value] || '')"></span>
        </p>
      </el-collapse-item>
      <el-collapse-item title="留言信息" name="leaveMessageInfo" v-else>
        <p v-for="(item, index) in leaveMessageInfoArr" :key="index" class="infoItem">
          <span class="title">{{item.name}}</span>
          <span class="content">{{webchatInfo[item.value] ? webchatInfo[item.value] : ''}}</span>
        </p>
      </el-collapse-item>
      <el-collapse-item title="满意度评价" name="leaveMessageInfo" v-if="['webchat_session'].includes(type) || module === 'dynamic'">
        <p v-for="(item, index) in csrInfoArr" :key="index" class="infoItem">
          <span class="title">{{item.name}}</span>
          <span v-if="webchatInfo.satisfactionData && item.value === 'satisfactionReason'">
            <span class="content" v-for="(item, index) in webchatInfo.satisfactionData[item.value]" :key="index">
              {{item}}
            </span>
          </span>
          <span class="content" v-else>
            {{webchatInfo.satisfactionData && webchatInfo.satisfactionData[item.value] ? webchatInfo.satisfactionData[item.value] : ''}}
          </span>
        </p>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script lang="ts">
import Clipboard from 'clipboard-js'
import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
@Component({
  name: 'webchatInfo'
})
export default class WebchatInfo extends Vue {
  @Prop() private commonData: any
  @Prop({ default: '' }) public module!: string;
  private $message: any
  private $route: any
  private webchatInfo = {}
  private activeNames = ['sessionInfo', 'information', 'leaveMessageInfo']

  private informationArr = [ // 访问信息展示字段
    { name: '接入号：', value: 'accessName' },
    // { name: '浏览器：', value: 'accessName' },
    // { name: '操作系统：', value: 'accessName' },
    { name: '地域&地址：', value: 'area' },
    { name: 'IP地址：', value: 'ip' },
    { name: '访问来源：', value: 'seoSource' },
    { name: '访问来源关键词：', value: 'seoKeywords' },
    { name: '接入别名：', value: 'userAlias' },
    { name: '上级来源页面：', value: 'referrer' },
    { name: '会话来源页面：', value: 'fromUrl' },
    { name: '访客着陆页面：', value: 'landingPageUrl' }
  ]

  private sessionInfoArr = [ // 会话信息展示字段
    { name: '会话ID：', value: 'sessionId' },
    { name: '技能组：', value: 'queueName' },
    { name: '接待座席：', value: 'userName' },
    { name: '会话创建时间：', value: 'createTime' },
    { name: '会话领取时间：', value: 'agentClaimTime' },
    { name: '首次响应时间：', value: 'agentFirstReplyTime' },
    { name: '会话次数：', value: 'dialogueTimes' }
  ]

  private leaveMessageInfoArr = [ // 留言信息展示字段
    { name: '接待座席：', value: 'userName' },
    { name: '留言创建时间：', value: 'createTime' },
    { name: '座席领取时间：', value: 'claimTime' },
    { name: '处理时间：', value: 'dealTime' }
  ]

  private csrInfoArr = [
    { name: '名称：', value: 'satisfactionName' },
    { name: '标签：', value: 'satisfactionReason' },
    { name: '备注：', value: 'satisfactionProposal' }
  ]

  get type () {
    return this.$route.path.split('/')[3] || ''
  }

  @Watch('commonData', { immediate: true })
  private commonDataChange (newData: any) {
    if (newData && newData.webchatDetails) {
      this.$set(this, 'webchatInfo', newData.webchatDetails)
    }
  }

  private copyText (content: string) { // 复制
    Clipboard.copy(content).then(() => {
      this.$message.success('复制成功')
    }).catch(() => {
      this.$message.error('复制失败')
    })
  }
}
</script>
<style lang="stylus" scoped>
  .webchatInfo
    padding 0px 10px
    height calc(100% - 100px)
    overflow auto
    .infoItem
      padding 2px 0px
      .content
        color #686E84
      .V7_iconV7tubiao_fuzhi
        margin-left 10px
        font-size 12px
        color #686e84
        cursor pointer
</style>
<style lang="stylus">
  .webchatInfo
    .el-collapse
      border none
    .el-collapse-item__header
      font-size 14px
      font-weight bold
    .el-collapse-item__wrap
      border-bottom none
</style>
